<template>
  <div class="about">
  <h1>person{{person}}</h1>
  <button @click="changeperson">改变person</button>
  
  </div>
</template>

<script lang="ts">
 import {defineComponent} from "vue"
export default defineComponent({
  name :"About",
 
});


</script>
<script lang="ts" setup>
import {ref, watch}from 'vue';

let person = ref({
    name: "老王",
    age: 18,
    score: {
    math: {
      one: 100,
      two: 200,
    },
    en: 90,
  },
})
const changeperson=()=>{
 person.value.score.math.one = 1011;
 person.value.name='小李子'
};
// watch(
//   person.value,(nweValue,oldValue)=>{
// console.log("count的监听", nweValue, oldValue);
//   },{
//     immediate:true
//   }
// );

// watch(
//   person.value.score,
//   (newVal, oldVal)=>{
//     console.log("count的监听", newVal, oldVal);
//   },
//    { deep: true }
// )

// watch(
//   person,
//   (newVal, oldVal)=>{
//     console.log("count的监听", newVal, oldVal);
//   },
//    { deep: true }
// )

// watch(
//   [() => person.value.age, () => person.value.name, person.value.score],
//   () => {
//     console.log("watch");
//   }
// );

//6.wacth监视多个属性
watch(
  () => person.value.name,
  () => {
    console.log("watch name");
  }
);
watch(
  () => person.value.age,
  () => {
    console.log("watch age");
  }
);




</script>